<template>
    <div class="padding-box">
        <!-- 销售额比较 -->
        <div class="bora-10 padding-box" style="background-color: #fff;">
            <!-- 前三名 -->
            <div v-for="(item, index) in salesList" :key="index">
                <div class="flex-bew" @click="toSold(item)">
                    <div v-if="index == 0" class="spanDiv">
                        <span class="one">{{ item.name }}</span>
                        <img class="margin-left-10 img1" src="../../assets//home_img/one.png">
                    </div>
                    <div v-else-if="index == 1" class="spanDiv">
                        <span class="twe">{{ item.name }}</span>
                        <img class="margin-left-10 img2" src="../../assets//home_img/twe.png">
                    </div>
                    <div v-else-if="index == 2" class="spanDiv">
                        <span class="three">{{ item.name }}</span>
                        <img class="margin-left-10 img3" src="../../assets//home_img/three.png">
                    </div>
                    <div v-else class="spanDiv">
                        <span class="other">{{ item.name }}</span>
                    </div>
                    <div>
                        <span>{{ item.money }}元</span>
                        <van-icon class="margin-left-10" name="arrow" />
                    </div>
                </div>
                <van-divider :style="{ borderColor: '#1989fa' }" v-show="index != 9" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            salesList: [
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '10000.00' },
                { name: '张三', money: '0.00' },
            ]
        }
    },
    mounted() {
        console.log(this.$route.query)
    },
    methods: {
        toSold(data) {
            console.log(data)
            if (data.money != '0.00') {
                this.$router.push({
                    path: '/sold',
                    query: data
                })  
            } else {
                this.$toast({
                    message: '该成员无业绩',
                    icon: 'clear',
                });
            }
        }
    }
}
</script>
<style scoped>
.img1 {
    width: 40px;
    height: 40px;
}

.img2 {
    width: 35px;
    height: 35px;
}

.img3 {
    width: 30px;
    height: 30px;
}

.spanDiv {
    display: flex;
    align-items: center;
}

.one {
    font-size: 20px;
}

.twe {
    font-size: 18px;
}

.three {
    font-size: 15px;
}

.other {
    font-size: 15px;
}
</style>